<template>
	<uni-transition :show="Object.keys(props.item).length>0" :mode-class="['fade', 'zoom-in']" :duration="500">
		<view class="container" @click="handleGoToDetail">
			<image class="cover" :src="item.blogCard.cover" mode="widthFix"></image>
			<view class="title">
				{{item.blogCard.displayTitle}}
			</view>
			<view class="user">
				<view class="info">
					<view class="avatar">
						<image :src="item.blogCard.user.avatar" mode="aspectFit"></image>
					</view>
					<view class="nickname">
						{{item.blogCard.user.nickname}}
					</view>
				</view>
				<view class="like">
					<uni-icons :class="isLikedClass" :type="isLiked"></uni-icons>
					{{item.blogCard.interactInfo.likedCount}}
				</view>
			</view>
		</view>
	</uni-transition>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	const props = defineProps({
		item: {
			type: Object,
			default: {}
		}
	})
	const isLiked = computed(() => {
		const {
			item
		} = props;
		if (item.blogCard.interactInfo.liked) {
			return "heart-filled";
		}
		return "heart";
	})
	const isLikedClass = computed(() => {
		const {
			item
		} = props;
		if (item.blogCard.interactInfo.liked) {
			return "heart-red";
		}
		return "heart-gray";
	})

	const handleGoToDetail = () => {
		console.log();
		const id = props.item.id;
		uni.navigateTo({
			url: `/pages/blog-details/blog-details?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-top: 10px;
		border-radius: 10rpx;
		background-color: white;
		break-inside: avoid;

		.cover {
			border-radius: 10rpx 10rpx 0 0;
			width: 100%;
		}


		.title {
			padding: 0 12rpx;
			margin: 15rpx 0;
			font-size: 32rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;

		}

		.user {
			padding: 0 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 15rpx;

			.info {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				gap: 10rpx;

				.avatar {
					image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}

				.nickname {
					color: $uni-text-color;
				}
			}

			.like {
				color: $uni-text-color;


				.heart-gray {
					color: gray !important;
				}

				.heart-red {
					color: red !important;
				}
			}
		}

	}
</style>